<template>
  <div class="pagina">
    <el-pagination
      model-value:current-page="currentPage"
      model-value:page-size="pageSize"
      :page-sizes="pageSizes"
      :background="background"
      :layout="layout"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
// ["currentPage", "pageSize", "total", "pageSizes", "totalFlag"]
defineProps({
  layout: {
    default: "total,prev, pager, next, sizes, jumper",
  },
  currentPage: {},
  pageSize: {},
  total: {},
  pageSizes: {
    default: [10, 20, 30, 40, 50],
    type: Array,
  },
});
let emit = defineEmits([
  "getDataList",
  "update:currentPage",
  "update:pageSize",
]);
const background = ref(true);
const handleSizeChange = (pagesize) => {
  emit("update:pageSize", pagesize);
  emit("getDataList");
};
const handleCurrentChange = (currentPage) => {
  emit("update:currentPage", currentPage);
  emit("getDataList");
};
</script>
<style scoped lang="scss">
.pagina {
  text-align: right;
  float: right;
} 
</style>
